<!-- https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/intent/Header@2x.png -->
<!-- https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/intent/Close@2x.png -->
<template>
  <modal :visible="visible" position="center">
    <view class="container" v-if="!cancel">
      <view class="close" @click="closeModal('关闭')">
		    <image style="width:64rpx;height:64rpx" src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/intent/Close@2x.png" mode="widthFix">
	  </view>

	  <image style="width:526rpx;height:108rpx" src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/intent/Header@2x.png" mode="widthFix">
		<view class="font28-box">
			<view class="font28">感谢您的登记，当您符合可购该商品的会</view>
			<view class="font28">员等级时，我们将优先为您提供购买邀约</view>
			<view class="font28" v-if="!favStatus">商品已同步为您添加至心愿单</view>
		</view>

      <view class="intent-btn" @click="lithaBook" v-if="litha && canBuy == 0">
        {{lithaButtonStatus?'确定':'订阅上新通知'}}
      </view>
      <view class="intent-btn" v-if="!litha && arrivalBtnText && canBuy == 0" @click='arrivalNowSubscribe'>
        {{arrivalBtnText == '到货提醒'?'订阅到货提醒':'确定'}}
      </view>
      <view class="intent-btn" @click="closeModal('确定')" v-if="canBuy == 0 && !litha && !arrivalBtnText">确定</view>
      <view class="intent-btn" @click="closeModal('确定')" v-if="canBuy !== 0">确定</view>
    </view>
    <view class="container" v-else>
      <view class="close" @click="closeModal('关闭')">
      		    <image style="width:64rpx;height:64rpx" src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/intent/Close@2x.png" mode="widthFix">
      </view>
	  <image style="width:526rpx;height:124rpx" src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/intent/test.png" mode="widthFix">
      <view class="confrim-btn">
        <view class="confirmBtn cancel" @click="closeModalConfirm">取消</view>
        <view class="confirmBtn sure" @click="cancelIntent">确认</view>
      </view>
    </view>
  </modal>
</template>

<script>
  import modal from "@/components/modal/modal.vue";
  import api from '@/api/api';
  import tip from '@/utils/tip';
  import {
    MERCHANT_INFO,
    CUSTOMER_INFO,
  } from '@/utils/constant';
  export default {
    components: {
      modal
    },
    data() {
      return {
        visible: false,
        canBuy: false,
        btnText: false,
        arrivalBtnText: '',
        litha: false,
        favStatus: false,
        cancel: false,
      }
    },
    props: {
      lithaButtonStatus: {
        typeof: Boolean
      }
    },

    methods: {
      open(canBuy, btnText, arrivalBtnText, litha, favStatus) {
		 try{
		 	this.canBuy = canBuy
		 	this.btnText = btnText
		 	this.arrivalBtnText = arrivalBtnText
		 	this.litha = litha
		 	this.favStatus = favStatus
		 	this.cancel = false
		 	this.visible = true
		 	this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '意向登记', 'popup_name': !this.cancel ? '登记成功弹窗' :'取消登记弹窗'})
		 }catch(e){
		 	//TODO handle the exception
		 }

      },
      confrim() {
        this.cancel = true
        this.visible = true
        this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '意向登记', 'popup_name': '取消登记弹窗'})
      },
      closeModal(type) {
        this.visible = false
        if(!!type) {
          this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '意向登记', 'popup_name': !this.cancel ? '登记成功弹窗' :'取消登记弹窗', 'button_name': type})
        }
      },
      closeModalConfirm() {
        this.visible = false
        this.$parent.commonTrack('c_ebmp_product_cancel_notice_me_result', {
          c_result: '未取消登记'
        })
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '意向登记', 'popup_name': '取消登记弹窗', 'button_name': '取消'})
      },

      cancelIntent() {
        this.$parent.intentHandle('modal')
        this.visible = false
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '意向登记', 'popup_name': '取消登记弹窗', 'button_name': '确认'})
      },
      lithaBook() {
        if (!this.lithaButtonStatus) {
          this.$parent.lithaBook('intent')
        } else {
          this.closeModal()
        }
        let btn = this.litha && this.canBuy == 0 && !this.lithaButtonStatus ? '订阅上新通知' : '确定'
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '意向登记', 'popup_name': '登记成功弹窗', 'button_name': btn})
      },
      arrivalNowSubscribe() {
        if (this.arrivalBtnText == '到货提醒') {
          this.$parent.arrivalNowSubscribe('intent')
        } else {
          this.closeModal()
        }
        let btn = !this.litha && this.arrivalBtnText && this.canBuy == 0 && this.arrivalBtnText == '到货提醒' ? '订阅到货提醒' : '确定'
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '意向登记', 'popup_name': '登记成功弹窗', 'button_name': btn})
      }
    }
  }
</script>

<style lang="scss">


  .container {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-items: center;
		width: 640rpx;
       padding:128rpx 0 96rpx;
       background: #fff;
       color: #1A1A1A;
	.font28-box {
		width: 640rpx;
		margin: 80rpx 0;
	}
    .font28 {
		width: 640rpx;
      font-size: 28rpx;
	  line-height: 48rpx;
	  text-align: center;
	  color: #757575;
	 font-family: 'NotoSansSC-Regular'

    }

    .close {
      position: absolute;
      width: 64rpx;
      height: 64rpx;
      top: 24rpx;
      right: 24rpx;
    }

    .title {
      padding: 80rpx 0 52rpx;
      font-size: 40rpx;
      text-align: center;
    }

    .sub-title {
      width: 420rpx;
      margin: 0 auto 52rpx;
      text-align: left;
      font-size: 28rpx;
      line-height: 44rpx;

      .center {
        text-align: center;
      }
    }

    .intent-btn {
    width: 526rpx;
    height: 80rpx;
    border-radius: 48rpx 16rpx 48rpx 48rpx;
      background: #000000;
      color: #fff;
      font-size: 26rpx;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto ;
	font-family: 'NotoSansSC-Medium';
      &.grey {
        background: #AFAFAF;
      }
    }

	.confrim-btn {
		margin-top: 80rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: flex-start;
	  width: 526rpx;
	  height: 80rpx;
	  box-sizing: border-box;
	  // padding: 0 50rpx;

	  .confirmBtn {

	   width: 255rpx;
	   height: 80rpx;
	   border-radius: 48rpx 16rpx 48rpx 48rpx;
	   font-family: 'NotoSansSC-Medium';
		text-align: center;
	    font-size: 28rpx;
	    letter-spacing: 1px;

	    &.cancel {
		line-height: 72rpx;
	      border: 4rpx solid #000000;
		  color: #000000
	    }

	    &.sure {
		line-height: 80rpx;
		background-color: #000000;
	      color: #fff;
	    }
	  }
	}



  }
</style>
